<template>
  <div>

    <Row class="search-info-style" style="margin: 15px 0">
      <Col style="float: left">
       <Input v-model="value" placeholder="请输入姓名" style="width: 200px"></Input>
        <Button class="new-btn-sty" type="success" style="margin-left:5px;" @click="search"
          ><Icon type="primary" />查询</Button
        >
      </Col>

    </Row>
    <vxe-table
      resizable
      border
      ref="xTree"
      row-id="row.id"
      show-overflow="tooltip"
      highlight-hover-row
      align="center"
      header-align="center"
      :data.sync="list"
    >
      <vxe-table-column field="NAME" title="姓名"></vxe-table-column>
      <vxe-table-column field="card_no" title="证件号码"></vxe-table-column>
      <vxe-table-column field="phone" title="联系电话"></vxe-table-column>
      <vxe-table-column field="post" title="岗位"></vxe-table-column>
      <vxe-table-column title="操作">
        <template slot-scope="{ row }">
          <Button
            size="small"
            class="actionBtn"
            type="primary"
            @click="score(row.id, 'add')"
            style="margin-right: 5px"
            v-if="row.operation == 'non'"
            >评测</Button
          >

          <Button
            size="small"
            class="actionBtn"
            type="warning"
            @click="score(row.id, 'update')"
            style="margin-right: 5px"
            v-if="row.operation == 'update'"
            >修改评测</Button
          >

          <Button
            size="small"
            class="actionBtn"
            type="info"
            @click="info(row.id)"
            >评测列表</Button
          >
        </template>
      </vxe-table-column>
    </vxe-table>

    <div style="display: flex; justify-content: right">
      <Page
        :total="totalRecord"
        :page-size="pageSize"
        show-total
        @on-change="currentChange"
        style="margin: 20px 0"
      ></Page>
    </div>

    <Modal v-model="show" title="绩效考核" width="450" @on-ok="submit">
      <Form ref="formValidate" :model="formValidate" :label-width="80">
        <Form-item label="综合治理" prop="government">
          <Rate v-model="formValidate.government"></Rate>
        </Form-item>
        <Form-item label="日常巡查" prop="Patrol">
          <Rate v-model="formValidate.Patrol"></Rate>
        </Form-item>
        <Form-item label="文明创建" prop="establish">
          <Rate v-model="formValidate.establish"></Rate>
        </Form-item>
        <Form-item label="作风建设" prop="build">
          <Rate v-model="formValidate.build"></Rate>
        </Form-item>
        <Form-item label="业务考核" prop="assessment">
          <Rate v-model="formValidate.assessment"></Rate>
        </Form-item>
        <Form-item label="热线投诉" prop="complaint">
          <Rate v-model="formValidate.complaint"></Rate>
        </Form-item>
        <Form-item label="监察投诉" prop="supervision">
          <Rate v-model="formValidate.supervision"></Rate>
        </Form-item>
      </Form>
    </Modal>

    <Modal v-model="modal3" width="1200">
      <vxe-table
        resizable
        border
        ref="xTree"
        show-overflow="tooltip"
        highlight-hover-row
        align="center"
        header-align="center"
        :data.sync="infoList"
      >
        <vxe-table-column
          field="create_time"
          title="评测时间"
        ></vxe-table-column>
        <vxe-table-column title="综合治理">
          <template slot-scope="{ row }">
            <Rate :value="Number(row.government)" disabled></Rate>
          </template>
        </vxe-table-column>

        <vxe-table-column title="日常巡查">
          <template slot-scope="{ row }">
            <Rate :value="Number(row.Patrol)" disabled></Rate>
          </template>
        </vxe-table-column>

        <vxe-table-column title="文明创建">
          <template slot-scope="{ row }">
            <Rate :value="Number(row.establish)" disabled></Rate>
          </template>
        </vxe-table-column>

        <vxe-table-column title="作风建设">
          <template slot-scope="{ row }">
            <Rate :value="Number(row.build)" disabled></Rate>
          </template>
        </vxe-table-column>

        <vxe-table-column title="业务考核">
          <template slot-scope="{ row }">
            <Rate :value="Number(row.assessment)" disabled></Rate>
          </template>
        </vxe-table-column>

        <vxe-table-column title="热线投诉">
          <template slot-scope="{ row }">
            <Rate :value="Number(row.complaint)" disabled></Rate>
          </template>
        </vxe-table-column>

        <vxe-table-column title="监察投诉">
          <template slot-scope="{ row }">
            <Rate :value="Number(row.supervision)" disabled></Rate>
          </template>
        </vxe-table-column>
      </vxe-table>

      <div style="display: flex; justify-content: right">
        <Page
          :total="infoTotal"
          :page-size="infoPageSize"
          show-total
          @on-change="infoCurrentChange"
          style="margin: 20px 0"
        ></Page>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  findWorkeList,
  saveAchievements,
  findWorkeAchievementsList,
  findWorkeAchievements,
  updateWorkeAchievements
} from '@/api/asset';
export default {
  data() {
    return {
      show: false,
      totalRecord: null,
      pageNo: 1,
      pageSize: 10,
      list: [],
      formValidate: {
        government: null,
        Patrol: null,
        establish: null,
        build: null,
        assessment: null,
        complaint: null,
        supervision: null
      },
      id: '',
      modal3: false,
      infoList: [],

      infoTotal: null,
      infoPageSize: 10,
      infoPageNo: 1,
      infoId: '',
      type: '',
      value: ''
    };
  },

  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let data = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        NAME: this.value
      };

      findWorkeList(data).then((res) => {
        this.list = res.data.data.page.results;
        this.totalRecord = res.data.data.page.totalRecord;
      });
    },

    search() {
      this.pageNo = 1
      this.getData()
    },
    score(id, type) {
      this.type = type;
      this.id = id;
      if (type == 'update') {
        let data = {
          worke_id: id
        };

        findWorkeAchievements(data).then((res) => {
          if (res.data.errcode == 0) {
            // this.formValidate = res.data.data
            let info = res.data.data;
            this.formValidate.government = Number(info.government);
            this.formValidate.Patrol = Number(info.Patrol);
            this.formValidate.establish = Number(info.establish);
            this.formValidate.build = Number(info.build);
            this.formValidate.assessment = Number(info.assessment);
            this.formValidate.complaint = Number(info.complaint);
            this.formValidate.supervision = Number(info.supervision);

            this.formValidate.id = info.id;
          }
        });
      } else {
        this.formValidate = {
          government: null,
          Patrol: null,
          establish: null,
          build: null,
          assessment: null,
          complaint: null,
          supervision: null
        };
      }

      this.show = true;
    },

    currentChange(val) {
      this.pageNo = val;
      this.getData();
    },

    submit() {
      if (
        !this.formValidate.government ||
        !this.formValidate.Patrol ||
        !this.formValidate.establish ||
        !this.formValidate.build ||
        !this.formValidate.assessment ||
        !this.formValidate.complaint ||
        !this.formValidate.supervision
      ) {
        this.$Message.error('所有内容必选');
        return;
      }

      if (this.type == 'add') {
        this.formValidate.worke_id = this.id;
        this.formValidate.create_by = this.$store.state.user.userId;
        saveAchievements(this.formValidate).then((res) => {
          if (res.data.errcode == 0) {
            this.$Message.success('操作成功');
            this.formValidate = {
              government: null,
              Patrol: null,
              establish: null,
              build: null,
              assessment: null,
              complaint: null,
              supervision: null
            };

            this.getData();
          } else {
            this.$Message.error(res.errmsg);
          }
        });
      } else if (this.type == 'update') {
        updateWorkeAchievements(this.formValidate).then((res) => {
          if (res.data.errcode == 0) {
            this.$Message.success('操作成功');
          } else {
            this.$Message.error(res.data.errmsg);
          }
        });
      }
    },

    info(id) {
      this.infoId = id;
      this.modal3 = true;
      let data = {
        worke_id: id,
        pageNo: this.infoPageNo,
        pageSize: this.infoPageSize
      };

      findWorkeAchievementsList(data).then((res) => {
        console.log(res);
        if (res.data.errcode == 0) {
          this.infoList = res.data.data.page.results;
          this.infoTotal = res.data.data.page.totalRecord;
        }
      });
    },

    infoCurrentChange(val) {
      this.infoPageNo = val;
      this.info(this.infoId);
    }
  }
};
</script>

<style>
</style>